<template>
    <div>
        <div class="content">
            <div class="title">
                {{couponContent.mchtName}}
            </div>
            <div class="cont">
                <div class="couponDiv">
                    <coupon-denomination :item="{type:couponContent.type,denomination:couponContent.denomination}"></coupon-denomination>
                </div>
                <div class="card_info">
                    <div class="card_name">
                          {{couponContent.name}}
                    </div>
                    <div class="coupon_info_item">
                        <p class="star_con">
                            <star :couponComScore="couponContent.comScore"></star>
                        </p>
                        <p class="info_pad">{{couponContent.comNum}}条</p>
                    </div>
    
                    <div class="coupon_info_item color_gray">
                        有效期至: <span>{{couponContent.validatyEnd}}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
    .content {
        width: 95%;
        height: 100%;
        margin: 0 auto;
        background: #eee;
        margin-top: -12%;
        border-radius: 5px;
        .title {
            padding: 2%;
            font-size: .4rem;
            text-align: left;
            border-bottom: 1px solid #ddd;
            color: #333;
            font-weight: 300;
        }
        .couponDiv{
            margin-top: .2rem;
        }
        .cont{
            padding: 0 2%;
            .couponDiv{
                height: 80%;
            }
            .card_info{
                text-align: left;
                line-height: 1.2rem;
            }
            .color_gray {
                padding-top: 3%;
                color: #444;
                font-size: .7rem;
                font-weight: 200;
            }
        }

    }
</style>

<script>
import star from '../../componentes/global/star.vue'
    export default {
        data() {
            return {};
        },
        components:{
            star
        },
        props: {
            couponContent : {
                type: Object
            }
        }
    };
</script>
